<!doctype html>
<html lang="en">

<head>

    <!--====== Required meta tags ======-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--====== Title ======-->
    <title>HaFood</title>

    <!--====== Bootstrap css ======-->
    <link rel="stylesheet" href="/static/index/css/bootstrap.min.css">

    <!--====== Pe Icon 7 Stroke css ======-->
    <link rel="stylesheet" href="/static/index/css/Pe-icon-7-stroke.css">

    <!--====== Ion Icons css ======-->
    <link rel="stylesheet" href="/static/index/css/ionicons.min.css">

    <!--====== Magnific Popup css ======-->
    <link rel="stylesheet" href="/static/index/css/magnific-popup.css">

    <!--====== Slick css ======-->
    <link rel="stylesheet" href="/static/index/css/slick.css">

    <!--====== Animate css ======-->
    <link rel="stylesheet" href="/static/index/css/animate.min.css">

    <!--====== Nice Select css ======-->
    <link rel="stylesheet" href="/static/index/css/nice-select.css">

    <!--====== Default css ======-->
    <link rel="stylesheet" href="/static/index/css/default.css">

    <!--====== Style css ======-->
    <link rel="stylesheet" href="/static/index/css/style.css">


</head>

<body>

<!--====== PRELOADER  PART START ======-->

<div id="preloader">
    <div id="loader">
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
</div>

<!--====== PRELOADER  PART ENDS ======-->

<!--====== SEARCH PART START ======-->

<div class="search-box">
    <div class="search-header">
        <div class="container mt-60">
            <div class="row">
                <div class="col-6">
                    <h5 class="search-title">Search</h5> <!-- search title -->
                </div>
                <div class="col-6">
                    <div class="search-close text-right">
                        <button class="search-close-btn">Close <span></span><span></span></button>
                    </div> <!-- search close -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- search header -->
    <div class="search-body">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="search-form">
                        <form action="#">
                            <input type="text" placeholder="Search for Products">
                            <button><i class="flaticon-search"></i></button>
                        </form>
                    </div>
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- search body -->
</div>

<header class="header-area">
    <div class="navigation navigation-2 navigation-page fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-expand-lg">
                        <a class="navbar-brand" href="index.html">
                            <img src="/static/index/images/logo.png" alt="Logo">
                        </a> <!-- Logo -->

                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                        </button> <!-- navbar-toggler -->

                        <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item"><a href="index.html">主页</a></li>
                                <li class="nav-item"><a href="product-grid.html">全部商品</a></li>
                                <li class="nav-item"><a class="page-scroll" href="#">最新活动</a></li>
                                <li class="nav-item"><a class="page-scroll" href="#">会员俱乐部</a></li>

                                {% if user %}
                                 <li class="nav-item"><a class="page-scroll" href="order.html">{{ user.nick_name }}的订单</a></li>
                                {% endif %}
                            </ul>
                        </div> <!-- navbar collapse -->
                        <div class="navbar-icon d-none d-sm-block">
                            <ul>
                                <li><a class="search-open" href="#"><i class="pe-7s-search"></i></a></li>
                                <li><a class="" href="login.html">登录</a></li>
                            </ul>
                        </div>
                    </nav> <!-- navbar -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- navigation -->
</header>

<!--====== HEADER  PART ENDS ======-->

<!--====== PAGE TITLE  PART START ======-->

<section class="page-title-area d-flex align-items-center bg_cover"
         style="background-image: url(/static/index/images/page-title-bg.jpg)">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-title-item text-center">
                    <h3 class="title">加入我们</h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                            <li class="breadcrumb-item active" aria-current="page">About Us</li>
                        </ol>
                    </nav>
                </div> <!-- page title item -->
            </div>
        </div> <!-- row -->
    </div> <!-- row -->
    <div class="page-title-shape">
        <img src="/static/index/images/banner-shape.png" alt="shape">
    </div> <!-- page title shape -->
</section>

<!--====== PAGE TITLE  PART ENDS ======-->

<!--====== ABOUT US PART START ======-->

<section class="about-us-area-2 mb-60">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-7">
                <img src="/static/index/images/re.jpg" alt="about">
            </div>

            <div class="col-lg-6 col-md-5">
                {#                <div class="about-us-thumb">#}

                {#                    <div class="col-lg-6 col-md-7">#}
                <div class="col-lg-4 col-md-5 col-sm-8">
                    <div class="footer-item-2 mt-30">
                        <h2 class="title">找回密码</h2>
                        <form action="#" class="slogin_form">

                            <div class="input-box mt-25">
                                手机号*<input type="text" class="login" placeholder="请输入手机号" id="rphone">
                            </div>
                            <div class="input-box mt-25">
                                手机验证码*<input type="text" class="login" placeholder="输入手机验证码验证码"
                                             style="width:auto"
                                             id="rmi_code">
                                <button type="button" id="numbtn">点击发送验证码</button>
                            </div>
                            <div class="input-box mt-25">
                                新密码*<input type="password" class="login" placeholder="输入密码" id="rpassword">
                            </div>
                            <div class="input-box mt-25">
                                再次输入新密码*<input type="password" class="login" placeholder="再次输入密码" id="re_password">
                            </div>

                            <div class="input-box mt-25">
                                <button class="main-btn" type="button">提交 <i class="ion ion-ios-send"></i></button>
                            </div>
                        </form>
                    </div>

                    <div>
                        不用了！！！！！,去<a href="/login.html">登录</a>

                    </div>
                </div>
            </div>


        </div>
    </div>
    </div>
    </div>
</section>

<!--====== ABOUT US PART ENDS ======-->

<!--====== SUB ABOUT PART START ======-->

<section class="sub-sbout-area pb-85">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="sub-about-item text-center mt-30">
                    <i class="pe-7s-car"></i>
                    <h6 class="title">Free Shipping from $100</h6>
                    <p>Free shipping on purchases over.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="sub-about-item text-center mt-30">
                    <i class="pe-7s-cash"></i>
                    <h6 class="title">Money back guaranteed</h6>
                    <p>Lorem ipsum dolor sit amet conset</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="sub-about-item text-center mt-30">
                    <i class="pe-7s-lock"></i>
                    <h6 class="title">Secure Payment</h6>
                    <p>Lorem ipsum dolor sit amet consec</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="sub-about-item text-center mt-30">
                    <i class="pe-7s-check"></i>
                    <h6 class="title">100% authenticity guaranteed</h6>
                    <p>Lorem ipsum dolor sit amet adiscing</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!--====== SUB ABOUT PART ENDS ======-->

<!--====== CUSTOMER PART START ======-->

<section class="customer-area customer-about pt-85 pb-145">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-title text-center">
                    <h3 class="title">Testimonials</h3>
                </div>
            </div>
        </div>
        <div class="row customer-active">
            <div class="col-lg-6">
                <div class="gray-bg mt-30">
                    <div class="customer-item">
                        <img src="/static/index/images/customer-1.png" alt="customer">
                        <span><b>Adam</b> / Designer</span>
                        <p>“ Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ”</p>
                    </div> <!-- customer item -->
                </div>
            </div>
            <div class="col-lg-6">
                <div class="gray-bg mt-30">
                    <div class="customer-item">
                        <img src="/static/index/images/customer-2.png" alt="customer">
                        <span><b>Maddie Fletcher</b> / Customer</span>
                        <p>“ Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ”</p>
                    </div> <!-- customer item -->
                </div>
            </div>
            <div class="col-lg-6">
                <div class="gray-bg mt-30">
                    <div class="customer-item">
                        <img src="/static/index/images/customer-1.png" alt="customer">
                        <span><b>Adam</b> / Designer</span>
                        <p>“ Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ”</p>
                    </div> <!-- customer item -->
                </div>
            </div>
        </div> <!-- row -->
    </div> <!-- container -->
</section>

<!--====== CUSTOMER PART ENDS ======-->

<!--====== ABOUT TEAM PART START ======-->

<section class="about-team-area pt-80 pb-85">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title text-center">
                    <h3 class="title">Meat Our Team</h3>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-3 col-md-6 col-sm-8">
                <div class="about-team-item text-center mt-30">
                    <img src="/static/index/images/about-team-1.jpg" alt="team">
                    <span>Jared  Paul</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-8">
                <div class="about-team-item text-center mt-30">
                    <img src="/static/index/images/about-team-2.jpg" alt="team">
                    <span>Lowell Casey</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-8">
                <div class="about-team-item text-center mt-30">
                    <img src="/static/index/images/about-team-3.jpg" alt="team">
                    <span>Ted	Owens</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-8">
                <div class="about-team-item text-center mt-30">
                    <img src="/static/index/images/about-team-4.jpg" alt="team">
                    <span>Wilfred Rowe</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!--====== ABOUT TEAM PART ENDS ======-->

<!--====== FOOTER PART START ======-->

<section class="footer-area gray-bg pt-60 pb-85">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-5">
                <div class="footer-item-1 mt-30">
                    <a href="index.html"><img src="/static/index/images/logo-2.png" alt="logo"></a>
                    <span>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank"
                                                                                    href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
                    <ul>
                        <li><a href="#">Quality policy</a></li>
                        <li><a href="#">Customer Policy </a></li>
                        <li><a href="#"> 加入我们 </a></li>
                    </ul>
                    <div class="footer-info">
                        <ul>
                            <li><i class="ion ion-md-pin"></i> 123 New Design Str, ABC Building, <br> Melbourne,
                                Australia
                            </li>
                            <li><i class="ion ion-ios-mail"></i>example@gmail.com</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 offset-lg-2 col-md-2 col-sm-4">
                <div class="footer-social mt-30">
                    <h5 class="title">Social Links</h5>
                    <ul>
                        <li><a href="https://www.facebook.com/info.tanver">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="skype:live:taherul.islam_1">Skype</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-5 col-sm-8">
                <div class="footer-item-2 mt-30">
                    <h5 class="title">Newsletters</h5>
                    <form action="#">
                        <div class="input-box mt-25">
                            <input type="email" placeholder="Your email">
                        </div>
                        <div class="input-box mt-25">
                            <button class="main-btn">Submit <i class="ion ion-ios-send"></i></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!--====== FOOTER PART ENDS ======-->

<!--====== BACK TO TOP ======-->
<div class="back-to-top">
    <a href="">
        <i class="ion ion-md-arrow-up"></i>
    </a>
</div>
<!--====== BACK TO TOP ======-->
<script src="/static/index/js/vendor/jquery-1.12.4.min.js"></script>
<script src="/static/index/js/login.js"></script>

<!--====== jquery js ======-->
<script src="/static/index/js/vendor/modernizr-3.6.0.min.js"></script>


<!--====== Bootstrap js ======-->
<script src="/static/index/js/bootstrap.min.js"></script>
<script src="/static/index/js/popper.min.js"></script>

<!--====== Slick js ======-->
<script src="/static/index/js/slick.min.js"></script>

<!--====== Isotope js ======-->
<script src="/static/index/js/isotope.pkgd.min.js"></script>

<!--====== Images Loaded js ======-->
<script src="/static/index/js/imagesloaded.pkgd.min.js"></script>

<!--====== Magnific Popup js ======-->
<script src="/static/index/js/jquery.magnific-popup.min.js"></script>

<!--====== Nice Select js ======-->
<script src="/static/index/js/jquery.nice-select.min.js"></script>

<!--====== Ajax Contact js ======-->
<script src="/static/index/js/ajax-contact.js"></script>

<!--====== Main js ======-->
<script src="/static/index/js/main.js"></script>


<script>

    // 获取验证码倒计时

    var countdown = 60;

    $('#numbtn').on('click', function () {
        var obj = $("#numbtn");

        settime(obj);

    })

    function settime(obj) { //发送验证码倒计时

        if (countdown == 0) {
            obj.attr('disabled', false);

            //obj.removeattr("disabled");

            obj.html("免费获取验证码");

            countdown = 60;

            return;

        } else {
            obj.attr('disabled', true);

            obj.html("重新发送" + countdown + "s");

            countdown--;

        }

        setTimeout(function () {
                settime(obj)

            }

            , 1000)

    }
</script>
</body>

</html>

